<template>
  <div class="body"   v-loading="loading"
    element-loading-text="请先去认证或者去平台合作"
    :element-loading-spinner="svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    element-loading-background="rgba(122, 122, 122, 0.8)">
    <h4>
      商家相关订单
      <el-button type="primary" style="margin-left: 16px" @click="hexiaock">
        核销订单
      </el-button>
    </h4>

    <el-table :data="ordere" style="width: 100%">
      <el-table-column prop="id" label="订单编号" width="150" />
      <el-table-column prop="payTime" label="顾客下单时间" width="240" />
      <el-table-column prop="verificationTime" label="核销时间" width="240" />
      <el-table-column prop="monovalen" label="单价" width="120" />
      <el-table-column prop="number" label="数量" width="120" />
      <el-table-column prop="amount" label="总价" width="120" />
      <el-table-column prop="commodityRoleId" label="商品类型" width="120">
        <template v-slot="scope">
          <span v-if="scope.row.commodityRoleId == 1">汽油</span>
          <span v-else-if="scope.row.commodityRoleId == 2">石油</span>
          <span v-else>天然气</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="centerDialogVisible"
      title="请输入订单信息"
      width="500"
      center
    >
      <div style="text-align: center">
        <el-input
          v-model="hx.ding"
          style="width: 240px"
          size="large"
          placeholder="核销编号"
        />
        <div style="height: 20px"></div>
        <el-input
          v-model="hx.code"
          style="width: 240px"
          size="large"
          placeholder="核销码"
        />
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="quren()"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { ref, reactive, onMounted } from "vue";
import orderejs from "@/api/merchant/ordere";
//导入缓存js
import {useTokenStore} from "@/stores/token"
const yonghu=useTokenStore().token
//遮罩层
//遮罩层

const loading = ref(true);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
const zezhao = () => {
  console.log("xxxxxxxx")
  let sz=yonghu.auditStatus
  if(sz==1){
    loading.value=false;
  }else{
    loading.value=true
  }
};
//核销订单属性
const ordere = ref([]);
//核销时提交的对象
const hx = ref({});
//对话框
const centerDialogVisible = ref(false);
//对话框打开
const hexiaock = () => {
  centerDialogVisible.value = true;
};
//对话框-确认
const quren = async () => {
  hx.value.id = yonghu.id;
  let data = orderejs.hex(hx);
  if (data.flag) {
    centerDialogVisible.value = false;
  } else {
    alert("请重新确认核销信息");
  }
};
//查询核销的订单
const liebiao = async (id) => {
  let data = await orderejs.dingdan(id);
  ordere.value = data.shuju;
};
//钩子
onMounted(() => {
  zezhao()
  liebiao(yonghu.id);
});
</script>


<style lang='scss' scoped>
.body {
  width: 100%;
  height: 97%;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  background-color: #ecf0f3;
  color: #a0a5a8;
  position: relative;
}
</style>